<template>
  <view class="waybill">
    <view class="tabs-nav">
      <u-tabs
        :list="tabsList"
        :activeStyle="activeStyle"
        :inactiveStyle="inactiveStyle"
        :current="current"
        lineColor="#2354E3"
        @click="tabClick"
      ></u-tabs>
      <!-- lineWidth="80" -->
    </view>
    <swiper :current="current" @change="swiperChange" class="shopList">
      <swiper-item v-for="(titem, tindex) in tabsList" :key="tindex">
        <scroll-view class="sl-sv" scroll-y="true" @scrolltolower="scrolower"  v-if="orderList.length">
          <view class="box">
            <view class="item" v-for="(item, index) in orderList" :key="index">
              <view class="space-between">
                <view class="title flex">
					{{ item.order_id }}
					<image @click="$utils.copyMessage(item.order_id)" src="@/static/icon/copy-icon.png" class="copy-btn" mode="aspectFill"></image>
				</view>
                <view class="ttitle">{{ tabsList[item.status].name.split("(")[0] }}</view>
              </view>
              <!-- <view class="pack">仓库：{{ item.warehouse }}</view> -->
              <view class="time">运输路线：{{item.route}}</view>
              <view class="time">提交发货时间：{{item.add_time}}</view>
              <view class="time">包裹(件): 
				<text class="ttitle">{{item.weights}}</text>
				<!-- <text class="ttitle">{{item.status>2?((item.status==3||item.status==5||item.status==6||item.status==7)?item.count:item.weight):item.weights}}</text> -->
			  </view>
              <view class="time"
                >总计(¥):
                <text class="ttitle"
                  >{{item.pay_price}}
				  <!-- 1.23（美西）1.25（美中）125（美东） -->
                </text></view
              >
              <view class="time">收件人： {{item.real_name}}</view>
              <view class="time"
                >收货地址：{{item.user_address}}</view
              >
              <!-- <view class="time">收货区域： 美中</view> -->
              <view class="article"
                >物品：
				<view v-for="it in item.info">
					{{it.name}};
					<!-- {{it.brand?'/'+it.brand:''}}{{it.spe?'/'+it.spe:''}}{{it.num?'/'+it.num:''}}{{it.price?'/'+it.price:''}}； -->
				</view>
			</view
              >
			  <view class="time" v-if="item.remark"
			    >客服备注：{{item.remark}}</view
			  >
              <view class="btnbox" v-if="current > 1">
                <view
                  v-if="current != 7 && current != 2"
                  class="btn"
                  @click="logistics(item)"
                  >追踪</view
                >
                <view class="btn" @click="detail(item, 'no')">详情</view>
                <view
                  v-if="current == 6"
                  class="btn cancel"
                  @click="onCancel(item)"
                  >确认签收</view
                >
				<!-- pay(item) -->
				<!-- <view class="btn"  v-if="current == 2" @click="payItem=item; show1=true;">线下付款</view> -->
				<view class="btn detail"  v-if="current == 2" @click="payItem=item; show=true;">付款</view>
				<view class="btn" v-if="current == 2" @click="cancel(item)">取消</view>
              </view>
              <view class="btnbox" v-else>
                <view class="btn" @click="del(item)">取消</view>
                <view class="btn" @click="detail(item)">详情</view>
                <view class="btn" @click="edit(item)">编辑</view>
              </view>
            </view>
          </view>
        </scroll-view>
		<view v-else class="empty" >
			暂无数据...
		</view>
      </swiper-item>
    </swiper>
    <view class="search" @click="open">
      <u-icon name="search" color="#2354E3" size="40"></u-icon>
    </view>
    <!-- 搜索 -->
    <u-popup
      :show="popupShow"
      :round="10"
      mode="bottom"
      :closeable="true"
      @close="close"
    >
      <view class="content">
        <view class="ptitle">包裹查找</view>
        <view class="pcontet">
          <u-input
            placeholder="输入包裹追踪号"
            border="none"
            v-model="searchValue"
            :customStyle="inputStyle"
          ></u-input>
          <!-- placeholderStyle="{'font-size': '28rpx';
        'color':' #999999'}" -->
        </view>
        <view class="pbtn space-between">
          <view class="btn btn1" @click="searchValue = ''">重置</view>
          <view class="btn btn2" @click="onSearch">查询</view>
        </view>
      </view>
    </u-popup>
	<u-popup
	  :show="show1"
	  :round="10"
	  mode="center"
	  :closeable="true"
	  @close="()=>{show1=false; imgUrl='';}"
	>
	<view class="voucher">
		<view class="title">
			请上传凭证
		</view>
		<view class="upload-box">
			<view @click="getImg" style="width: 200rpx; height: 200rpx; border: 1rpx solid #969696; display: flex; justify-content: center; align-items: center;">
				<u-icon name="plus" v-if="!imgUrl" size="40" color="#969696"></u-icon>
				<image v-else :src="$utils.isBaseUrl(imgUrl)" style="width: 200rpx; height: 200rpx; display: block;" mode=""></image>
			</view>
		</view>
		<view class="sure-upload" @click="sureSubmit">
			确定
		</view>
	</view>
	</u-popup>
	<view >
		<u-modal showCancelButton @cancel="()=>{show=false;}" :show="show" @confirm="pay" title="提示" content='国际物流计费标准材积重与实重取较大值作为计费重量，空运海运材积算法：长*宽*高➗6000,DHL、UPS官方快递长*宽*高➗5000 请知悉！'></u-modal>
	</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 导航栏
      tabsList: [
        {
          name: "所有运单",
        },
		{
		  name: "待处理",
		},
        {
          name: "待付款",
        },
        {
          name: "待发货",
        },
        {
          name: "已发货",
        },
        {
          name: "美国待入库",
        },
        {
          name: "美国待签收",
        },
        {
          name: "美国已签收",
        },
		{
		  name: "已取消",
		},
      ],
      current: 0,
      activeStyle: {
        color: "#2354E3",
        fontSize: "32rpx",
        fontWeight: "bold",
      },
      inactiveStyle: {
        color: "#333333",
        fontSize: "32rpx",
      },
      // 订单列表
      orderList: [],
      // 输入框样式
      inputStyle: {
        "background-color": "#F5F5F5",
        "border-radius": "5rpx",
        "padding-left": "43rpx",
        padding: "30rpx",
      },
      // 搜索值
      searchValue: "",
      // 搜索框
      popupShow: false,
	  show:false,
	  show1:false,
	  payItem:'',
	  imgUrl:''
    };
  },

  onLoad(options) {
    if (options.current) {
      this.current = options.current;
    }
	this.getOrderList();
	this.getOrderNum()
  },

  methods: {
	  sureSubmit(){
		  if(!this.imgUrl){
			this.$u.toast("请先上传凭证！");
			return;
		  }
		  this.$api.post({
			url: "/ebapi/public_api/remittance",
			data:{
				id:this.payItem.id,
				voucher:this.imgUrl
			},
			success: (res) => {
				uni.showToast({
					title:"凭证上传成功，请等待审核！"
				})
				this.show1 = false;
				this.imgUrl = '';
			},
		 })
	  },
	  getImg(){
		  uni.chooseImage({
		  	success: (chooseImageRes) => {
		  		const tempFilePaths = chooseImageRes.tempFilePaths;
				this.$uniApi.uploadFile(tempFilePaths[0]).then((res) => {
				  console.log(res, "上传图片地址",this.$utils.isBaseUrl(res));
				  this.imgUrl = res;
				});
		  	}
		  });
	  },
	  resetTabsList(){
		  this.tabsList = [
		    {
		      name: "所有运单",
		    },
			{
			  name: "待处理",
			},
		    {
		      name: "待付款",
		    },
		    {
		      name: "待发货",
		    },
		    {
		      name: "已发货",
		    },
		    {
		      name: "美国待入库",
		    },
		    {
		      name: "美国待签收",
		    },
		    {
		      name: "美国已签收",
		    },
			{
			  name: "已取消",
			},
		  ]
	  },
	  getOrderNum(){
	  	this.$api.post({
	  		url: "/ebapi/public_api/deliver_order_count",
	  		// data: {status:this.current},
	  		success: (res) => {
	  			console.log(res,"res")
				this.resetTabsList();
	  			this.tabsList = this.tabsList.map((item,index)=>{
	  				item.name = `${item.name}(${res[index]})`;
	  				return item
	  			})
	  		},
	  	 })
	  },
	getOrderList(){
		 this.$api.post({
		     url: "/ebapi/public_api/deliver_order",
		     data: {
		 		status: this.current
		 	},
		    success: (res) => {
				this.orderList = res.map(item=>{
					item.info = JSON.parse(item.info);
					return item;
				})
		    },
		 }) 
	},
    // 点击导航栏
    tabClick(item) {
      console.log("item", item);
      this.current = item.index;
    },
    // 滑动导航栏
    swiperChange(e) {
      this.current = e.detail.current;
	  this.orderList = [];
	  this.getOrderList();
	  this.getOrderNum();
    },
    // 触底事件
    scrolower() {},
    //
    onCancel(item) {
      uni.showModal({
        title: "提示",
        content: "是否确认已经收到货物了么？",
        success: (res) => {
          if (res.confirm) {
            this.$api.post({
                url: "/ebapi/public_api/deliver_sign",
                data: {
            		id: item.id
            	},
               success: (res) => {
				   this.$u.toast("已经确认收货");
				   this.getOrderNum()
            	   this.getOrderList()
               },
            }) 
            
          } else if (res.cancel) {
            // 取消
            console.log("用户点击了取消");
          }
        },
      });
    },
	// 追踪
	logistics(item){
		this.$uniApi.to(`/pages/search/searchDetail?id=${item.id}`)
	},
	// 取消订单
	cancel(item){
		uni.showModal({
		  title: "提示",
		  content: "是否确认取消运单？",
		  success: (res) => {
		    if (res.confirm) {
				this.$api.post({
					url: "/ebapi/public_api/cancel_del",
					data: {
						id: item.id
					},
				   success: (res) => {
					   this.getOrderNum()
					   this.getOrderList()
				   },
				}) 
		    } else if (res.cancel) {
		      // 取消
		      console.log("用户点击了取消");
		    }
		  },
		});
	},
    // 删除订单
    del(item) {
      uni.showModal({
        title: "提示",
        content: "是否确认取消运单？",
        success: (res) => {
          if (res.confirm) {
            // 确定
			this.$api.post({
			    url: "/ebapi/public_api/deliver_del",
			    data: {
					id: item.id
				},
			   success: (res) => {
				   this.getOrderNum()
				   this.getOrderList()
				// this.orderList = res.map(item=>{
				// 	item.info = JSON.parse(item.info);
				// 	return item;
				// })
			   },
			}) 
          } else if (res.cancel) {
            // 取消
            console.log("用户点击了取消");
          }
        },
      });
    },
    // 编辑订单
    edit(eitem) {
      let info = JSON.stringify(eitem);
      this.$uniApi.to("/pages/my/waybillEdit?info=" + info);
    },
    // 订单详情
    detail(ditem, type) {
      this.$uniApi.to(`/pages/my/waybillDetail?type=${type}&id=${ditem.id}`);
    },
    // 订单详情
    pay(item) {
		this.show = false;
		uni.showLoading({
			title:"加载中"
		})
		let pitem = this.payItem;
		this.$api.post({
		    url: "/ebapi/auth_api/pay",
		    data: {
				orderId: pitem.order_id
			},
		   success: (res) => {
			   console.log(res,"res");
			   uni.hideLoading()
			   if(res.result && res.result.jsConfig){
				   let jsConfig = res.result.jsConfig;
				   uni.requestPayment({
				   	"timeStamp": jsConfig.timestamp,
				   	"nonceStr": jsConfig.nonceStr,  
				   	"package": jsConfig.package,  
				   	"signType": jsConfig.signType,  
				   	"paySign": jsConfig.paySign,
				   	success: (e) => {
				   		console.log(222)
				   		this.paySuccess(pitem.order_id);
				   	},
				   	fail: (e) => {
				   		console.log(11111)
				   		uni.showModal({
							content:'支付失败',
				   			showCancel: false
				   		})
				   	}
				   })
			   }
		   },
		}) 
		// uni.showModal({
		// 	title:"提示",
		// 	content:"国际物流计费标准材积重与实重取较大值作为计费重量，空运海运材积算法：长*宽*高➗6000,DHL、UPS官方快递长*宽*高➗5000 请知悉！",
		// 	success:(res)=>{
		// 		if(res.confirm){
		// 			this.$api.post({
		// 			    url: "/ebapi/auth_api/pay",
		// 			    data: {
		// 					orderId: pitem.order_id
		// 				},
		// 			   success: (res) => {
		// 				   console.log(res,"res");
		// 				   if(res.result && res.result.jsConfig){
		// 					   let jsConfig = res.result.jsConfig;
		// 					   uni.requestPayment({
		// 					   	"timeStamp": jsConfig.timestamp,
		// 					   	"nonceStr": jsConfig.nonceStr,  
		// 					   	"package": jsConfig.package,  
		// 					   	"signType": jsConfig.signType,  
		// 					   	"paySign": jsConfig.paySign,
		// 					   	success: (e) => {
		// 					   		console.log(222)
		// 					   		this.paySuccess(pitem.order_id);
		// 					   	},
		// 					   	fail: (e) => {
		// 					   		console.log(11111)
		// 							// content: "支付失败,原因为: " + e.errMsg,
		// 					   		uni.showModal({
		// 								content:'支付失败',
		// 					   			showCancel: false
		// 					   		})
		// 					   	}
		// 					   })
		// 				   }
		// 				   // this.$u.toast("已经确认收货");
		// 				   // this.getOrderNum()
		// 				   // this.getOrderList()
		// 			   },
		// 			}) 
		// 		}
		// 	}
		// })
	},
	paySuccess(order_id){
		uni.showToast({
			title:"支付成功！",
			icon:"none"
		});
		this.$api.get({
		    url: "/ebapi/notify/payNotify",
		    data: {
				orderId: order_id
			},
			success:(res)=>{
				this.current = 3;
				this.orderList = [];
				this.getOrderNum();
				this.getOrderList()
				console.log(res,"支付成功了！ 11")
			}
		})
	},
    // 搜索显示
    open() {
      this.popupShow = true;
    },
    // 搜索隐藏
    close() {
      this.popupShow = false;
    },
    // 查询
    onSearch() {
		if (this.searchValue) {
			this.popupShow = false;
		  this.$uniApi.to(`/pages/search/searchDetail?title=${this.searchValue}`);
		} else {
		  this.$u.toast("请输入要查询的追踪号");
		}
    },
  },
};
</script>

<style lang="scss">
page {
  padding: 0;
}
.voucher{
	width: 500rpx; text-align: center; padding: 24rpx 0;
	.title{
		line-height:90rpx; text-align: center; font-size: 30rpx;
	}
	.upload-box{
		display: flex; justify-content: center; margin-bottom: 24rpx;
	}
	.sure-upload{
		text-align: center; line-height: 60rpx; color: #fff; background-color: #2354e3; border-radius: 16rpx; margin: 0 24rpx;
	}
}
.u-popup__content{
	width: auto !important;
}
.waybill {
  .tabs-nav {
    background-color: #ffffff;
    padding-bottom: 20rpx;
  }

  .shopList {
    flex: 1;
    width: 100%;
    height: 85vh;
    overflow-y: auto;
    padding: 24rpx;

    .sl-sv {
      height: 100%;
    }

    .box {
      height: 100%;

      .item {
        // height: 433rpx;
        background: #ffffff;
        box-shadow: 0rpx 2rpx 10rpx 1rpx rgba(0, 0, 0, 0.08);
        border-radius: 16rpx 16rpx 16rpx 16rpx;
        opacity: 1;
        padding: 36rpx 36rpx 47rpx;
        margin-bottom: 24rpx;

        .title {
          font-size: $uni-text-size-title;
          color: $uni-color-main;
          font-weight: bold;
        }

        .ttitle {
          color: #e82e2e;
          margin-left: 20rpx;
        }

        .pack {
          margin: 35rpx 0;
        }

        .time {
          margin-bottom: 35rpx;
        }

        .article {
          margin-bottom: 48rpx;
        }

        .btnbox {
          color: $uni-text-color-grey;
          display: flex;
          justify-content: flex-end;

          .btn {
            border: 1px solid $uni-text-color-grey;
            padding: 14rpx 32rpx;
            border-radius: 5rpx;
            margin-left: 24rpx;
          }

          .detail {
            color: #e82e2e;
            border: 1px solid #e82e2e;
          }

          .cancel {
            color: #2354e3;
            border: 1px solid #2354e3;
          }
        }
      }
    }
  }

  .search {
    position: absolute;
    right: 24rpx;
    bottom: 2vh;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 96rpx;
    height: 96rpx;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0rpx 3rpx 6rpx 1rpx rgba(0, 0, 0, 0.16);
    opacity: 1;
  }

  .content {
    padding: 35rpx 62rpx 50rpx;

    .ptitle {
      font-size: 36rpx;
      font-weight: bold;
      text-align: center;
      margin-top: 30rpx;
    }

    .pcontet {
      color: #999999;
      font-size: $uni-text-size-title;
      margin: 40rpx 0;
    }

    .pbtn {
      text-align: center;
      font-size: $uni-text-size-title;
      padding: 0 85rpx;

      .btn {
        padding: 18rpx 68rpx;
        border-radius: 6rpx;
      }

      .btn1 {
        border: 1px solid #999999;
      }

      .btn2 {
        background-color: $uni-color-main;
        color: #ffffff;
      }
    }
  }
}
</style>
